<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <!-- 
        html 标签名和属性名是不识别大小写的
     -->
    <!-- <h1 class="a">h1</h1>
    <H1 CLASS="a">H1</H1> -->
    <div id="app">
        <h3>v-on 动态事件【vue2.5^】</h3>
        <!-- 
        vue提供的动态事件，可以根据实际项目开发需要，完成事件绑定类型的切换
            语法 v-on:[响应仓库中的变量名]="事件回调"
                 @[响应仓库中的变量名]="事件回调"
                 !!!动态事件绑定时，[] 中的变量名不识别驼峰变量
                 !!!如果需要由多个单词组成变量，可以使用_连字符变量定义规则
        -->
        <p>msg:{{ msg }}</p>
        <input type="text" @input=" msg=$event.target.value ">
        <input type="text" @change=" msg=$event.target.value ">
        <br><br>
        <input type="text" v-on:[event]=" msg=$event.target.value ">
        <input type="button" value="切换输出方式【及时输入|延迟输入】" @click=" event = event=='input'?'change':'input' ">
        <!-- <br><br>
        <input type="text" v-on:[eventName]=" msg=$event.target.value ">
        <input type="button" value="切换输出方式【及时输入|延迟输入】" @click=" eventName = eventName=='input'?'change':'input' "> -->
        <br><br>
        <input type="text" v-on:[event_name]=" msg=$event.target.value ">
        <input type="button" value="切换输出方式【及时输入|延迟输入】" @click=" event_name = event_name=='input'?'change':'input' ">
        <br><br>
        <input type="text" placeholder="输入短信验证码">
        <input type="button" v-bind:value="btnName" v-bind:disabled="flag" @[code_event]="sendCode()">
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    msg:"",
                    event:"input",
                    // eventName:"input",
                    event_name:"input",
                    code_event:"click",
                    btnName:"发送验证码",
                    flag:false
                }
            },
            methods:{
                sendCode:function(){
                    console.log("发送短信验证码")
                    this.code_event = "";
                    this.flag = true;

                    let num = 5;
                    this.btnName = num+"秒后重新发送"

                    // let that = this;
                    // setTimeout(function(){
                    //     console.log("time",this)
                    //     that.code_event = "click"
                    // },5000)

                    // setTimeout(()=>{
                    //     console.log("time",this)
                    //     this.code_event = "click"
                    //     this.btnName = "发送验证码"
                    // },5000)

                    let timer = setInterval(()=>{
                        num--;
                        if(num==0){
                            this.code_event = "click"
                            this.btnName = "发送验证码"
                            this.flag = false;
                            clearInterval( timer )
                        }else{
                            this.btnName = num+"秒后重新发送"
                        }
                    },1000)


                }
            }
        }).mount("#app")
    </script>
</body>
</html>